<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header a{
      color: #666;
      text-decoration: none;
    }
    .el-main a{
      color: #666;
      text-decoration: none;
    }
    .el-main p{
      color: chocolate;
      font-weight: bold;
      font-size: 20px;
      padding: 0;
      margin-top: 0;
    }
    .el-table .el-table__cell{
      padding: 0;/*去掉自带的内边距*/
    }
    .c1{
      transition-duration: 0.5s;
    }
    .c1:hover{
      transform: scale(1.1);
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="80px">
      <div style="width:1200px;margin: 0 auto;border: 1px solid white">
        <div style="width: 300px;float: right;">
          <a href="/login.html">您好，请登录</a>
          <el-divider direction="vertical"></el-divider>
          <a href="/reg.html">免费注册</a>
          <el-divider direction="vertical"></el-divider>
          <a href="/select.html">订单查询</a>
        </div>
        <div style="float: left">
          <img src="imgs/logo.png" width="150px">
        </div>
        <div style="width:300px;margin: 30px 450px 0 450px">
          <el-input type="text" placeholder="请输入搜索的内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <div style="margin: 0 auto;font-size:10px">
            <a href="">玫瑰</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">蛋糕</a>
            <el-divider direction="vertical"></el-divider>
            <a href="">康乃馨</a>
          </div>
        </div>
      </div>

    </el-header>
    <el-main>
      <div style="background-color:firebrick">
        <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal"
                 background-color="firebrick" text-color="white"
                 active-text-color="#0f0" @select="handleSelect()">
          <el-menu-item index="1">
            <el-cascader
                    v-model="value"
                    :options="options"
                    @change="handleChange" placeholder="全部商品分类"></el-cascader></el-menu-item>
          <el-menu-item index="2">鲜花</el-menu-item>
          <el-menu-item index="3">花束</el-menu-item>
          <el-menu-item index="4">礼盒</el-menu-item>
          <el-menu-item index="5">蛋糕</el-menu-item>
          <el-menu-item index="6">花篮</el-menu-item>
          <el-menu-item index="7">绿植</el-menu-item>
        </el-menu>
      </div>
      <div>
        <p>首页>鲜花>面包屑</p>
      </div>
      <div style="margin: 0 auto">
        <el-row gutter="20">
          <el-col span="10">
            <img :src="info" width="80%" height="80%">
            <img v-for="(is,i) in infoArr" :src="is" width="20%" @click="d(i)">
          </el-col>
          <el-col span="14">
            <p style="font-size: 25px;margin-top: 0">此生不渝</p>
            <hr>
            <p style="color: darkgray;font-size: 15px;">材料:11枝精品红玫瑰，桔梗适量搭配</p>
            <p style="color: darkgray;font-size: 15px;">包装：黑色包装纸精美包装，红色英文丝带束扎</p>
            <p style="color: darkgray;font-size: 15px;">附送：下单填写留言，免费赠送贺卡</p>
            <p style="color: darkgray;font-size: 15px;">配送：全国送货上门，市区免运费</p>
            <p style="color: darkgray;font-size: 15px;">优惠券： 暂无优惠券</p>
            <p style="color: darkgray;font-size: 15px;">
            <div class="block">
            <span class="demonstration">配送时间：</span>
            <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期" style="width: 150px">
            </el-date-picker>
            <el-select v-model="shijian" placeholder="不限时间" style="width: 150px">
              <el-option
                      v-for="s in shijianArr"
                      :key="s.value"
                      :value="s.value">
              </el-option>
            </el-select>
          </div></p>
            <div style="background-color: #b1b1b1;position:relative;margin: 0">
              <p style="color: red;font-size: 25px;font-weight: bold;display: inline-block;margin: 30px 0">店铺价:￥128</p>
              <p style="color: black;font-size: 15px;font-weight: bold">市场价:<s>998</s></p>
              <p style="position:absolute;font-size: 20px;right: 0;bottom: 0">销量:2000笔</p>
            </div>
            <div>
              <p>数量: <el-input-number size="small"
                                      v-model="num" @change="handleChange"
                                      :min="1" :max="10" label="描述文字">
                                      </el-input-number></p>
              <el-button  :plain="true" @click="open2">加入购物车</el-button>
              <el-button><a href="">立即购买</a></el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer>

      <div style="text-align: center;background-color: firebrick;
      color: #b1b1b1; padding: 30px 0">
        <p>Copyright © 山东予花科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖百余种花卉，致力于为您提供各种各样的花卉平台</p>
        <p>予香在线WWW.TMOOC.CN 专注于给您带去花香</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        num: 1,
        info:"imgs/c1.png",
        infoArr:["imgs/c1.png","imgs/c2.png"],
        shijianArr:[
          {value:'不限时间'},{value:'8:00-10:00'},{value:'10:00-12:00'},{value:'12:00-14:00'},{value:'14:00-18:00'},
          {value:'18:00-20:00'},{value:'20:00-22:00'},{value:'上午'},{value:'下午'},{value:'晚上'}
        ],
        shijian:"",
        value1: '',
        productArr:[{title:"浪漫满屋",price:229,oldPrice:399,url:"imgs/c1.png",saleCount:2342},
          {title:"此生不渝",price:168,oldPrice:268,url:"imgs/c2.png",saleCount:4342},
          {title:"粉色公主",price:169,oldPrice:269,url:"imgs/c3.png",saleCount:3625},
          {title:"永恒回忆",price:329,oldPrice:449,url:"imgs/c4.png",saleCount:2254},
          {title:"为你心动",price:329,oldPrice:499,url:"imgs/c5.png",saleCount:2536},
          {title:"如约而至",price:538,oldPrice:699,url:"imgs/c6.png",saleCount:3463},
          {title:"你是唯一",price:699,oldPrice:899,url:"imgs/c7.png",saleCount:1546},
          {title:"幸福如约",price:689,oldPrice:899,url:"imgs/c8.png",saleCount:3434}],
        value: [],
        options: [{
          label: '用途',
          children: [{label: '爱情鲜花'},
            {label: '生日鲜花'},
            {label: '友情鲜花'},
            {label: '商务鲜花'},
            {label: '哀思鲜花'},
            {label: '道歉鲜花'},
            {label: '探病问候'},
            {label: '问候长辈'},
            {label: '感谢老师'},
          ]
        }, {label: '花材',
          children: [{label: '玫瑰'},
            {label: '百合'},
            {label: '康乃馨'},
            {label: '向日葵'},
            {label: '满天星'},
            {label: '郁金香'},
            {label: '菊花'},
            {label: '其他'}]},
          {value: 'ziyuan', label: '类别',children: [{label: '花束'},
              {label:'礼盒'},
              {label:'蛋糕'},
              {label:'花篮'},
              {label:'绿植'},
              {label:'周花'},
              {label:'手提花篮'},
              {label:'桌花'},
              {label:'其他'}]},
          {label: '枝数',children: [{label: '11支'},
              {label: '19枝'},
              {label: '21枝'},
              {label: '33枝'},
              {label: '52枝'},
              {label: '66枝'},
              {label: '99枝'},
              {label: '其他'},
            ]}]
      }
    },
    methods:{
      open2() {
        this.$message({
          message: '加入购物车成功',
          type: 'success'
        });
      },
      handleChange(value) {
        console.log(value);
      },
      d(i){
        if(i==1){
          v.info = "imgs/c2.png";
        }else{
          v.info = "imgs/c1.png";
        }
      },

      handleSelect(key,keyPath){
        console.log(key);
      },
      handleChange(value) {
        console.log(value);
      }
    }
  })
</script>
</html>